<template>
    <div style="height:700px;overflow:auto;">
        <div>请求头</div>
        <el-table :data="qqtTableData" style="margin: 10px 0">
            <el-table-column label="参数名" prop="nodeName" width="150"/>
            <el-table-column
                    label="参数描述"
                    prop="nodeLabel"
                    :show-overflow-tooltip="true"
                    min-width="150"
            />
            <el-table-column label="参数类型" prop="nodeType" width="150">
                <template #default="scope">
                    <span>{{ selectDictLabel(keyTypeList, scope.row.nodeType) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="参数值" prop="nodeData" min-width="200">
                <template #default="scope">
                    <el-input v-model="scope.row.nodeData"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="是否必须" prop="nodeNeededable">
                <template #default="scope">
                    <yes-no-tag
                            yesText="是"
                            noText="否"
                            :value="scope.row.nodeNeededable || ''"
                    />
                </template>
            </el-table-column>
            <el-table-column label="是否必填" prop="nodeValueable">
                <template #default="scope">
                    <yes-no-tag
                            yesText="是"
                            noText="否"
                            :value="scope.row.nodeValueable || ''"
                    />
                </template>
            </el-table-column>
            <el-table-column
                    label="校验规则"
                    prop="nodeCheckRegex"
                    :show-overflow-tooltip="true"
                    min-width="200"
            />
        </el-table>
        <div>填写入参</div>
        <el-table style="margin: 10px 0" row-key="nodeId" :data="inputTableData">
            <el-table-column
                    label="参数名"
                    prop="nodeName"
                    :show-overflow-tooltip="true"
                    min-width="100"
            >
                <template #default="scope">
                    <div style="display: inline-block">
                        <span>{{ scope.row.nodeName }}</span>
                        <el-tag size="mini" v-if="scope.row.isAttr === 'Y'">属性</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="参数类型" prop="nodeType" width="140">
                <template #default="scope">
                    <span>{{ selectDictLabel(keyTypeList, scope.row.nodeType) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="参数值" prop="nodeData" min-width="200">
                <template #default="scope">
                    <div style="position: relative;">
                        <el-input
                                v-model="scope.row.nodeData"
                                v-if="scope.row.nodeParentId == 0"
                                class="custom-input"
                                type="textarea"
                                :rows="2"
                        ></el-input>
                        <span v-else>子节点</span>
                        <el-button
                                size="mini"
                                @click="formatJson(scope.row)"
                                v-if="scope.row.nodeType == 'object' || scope.row.nodeType == 'array' "
                                style="border-radius: 4px;"
                        >
                            格式化
                        </el-button>
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                    label="是否必须"
                    prop="nodeNeededable"
                    width="80"
                    align="center"
            >
                <template #default="scope">
                    <yes-no-tag
                            yesText="是"
                            noText="否"
                            :value="scope.row.nodeNeededable || ''"
                    />
                </template>
            </el-table-column>
            <el-table-column
                    label="是否必填"
                    prop="nodeValueable"
                    width="80"
                    align="center"
            >
                <template #default="scope">
                    <yes-no-tag
                            yesText="是"
                            noText="否"
                            :value="scope.row.nodeValueable || ''"
                    />
                </template>
            </el-table-column>
            <el-table-column
                    label="校验规则"
                    prop="nodeCheckRegex"
                    :show-overflow-tooltip="true"
                    min-width="100"
            />
        </el-table>
        <div>出参格式</div>
        <el-table style="margin: 10px 0" row-key="nodeId" :data="outputData">
            <el-table-column
                    label="参数名"
                    prop="nodeName"
                    :show-overflow-tooltip="true"
                    min-width="100"
            >
                <template #default="scope">
                    <div style="display: inline-block">
                        <span>{{ scope.row.nodeName }}</span>
                        <el-tag size="mini" v-if="scope.row.isAttr === 'Y'">属性</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="参数描述"
                    prop="nodeLabel"
                    :show-overflow-tooltip="true"
                    min-width="100"
            />
            <el-table-column label="参数类型" prop="nodeType" width="140">
                <template #default="scope">
                    <span>{{ selectDictLabel(keyTypeList, scope.row.nodeType) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="是否必须"
                    prop="nodeNeededable"
                    width="80"
                    align="center"
            >
                <template #default="scope">
                    <yes-no-tag
                            yesText="是"
                            noText="否"
                            :value="scope.row.nodeNeededable || ''"
                    />
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 20px; border: 1px solid #e0e0e0; border-radius: 5px; background-color: #f9f9f9;">
            <h3 style="color: #333;">解析结果</h3>
            <div style="font-weight: bold; font-size: 16px;">
                <div v-if="csInfo.code === '200'">
                    <div style="font-size: 16px; color: green;">成功：{{ csInfo.code }}</div>
                </div>
                <div v-else>
                    <div style="font-size: 16px; color: red;">失败：{{ csInfo.message }}</div>
                </div>
            </div>

            <h3 style="margin-top: 20px; color: #333;">出参结果</h3>
            <div v-if="csInfo.code === '200' && csInfo.nextFlag">
                <el-input
                        type="textarea"
                        :value="JSON.stringify(csInfo.data, null, 2)"
                        :rows="10"
                        style="border: 1px solid #e0e0e0; border-radius: 5px; background-color: #fff; padding: 10px; width: 100%;"
                ></el-input>
            </div>

        </div>

    </div>
</template>

<script>
// import { mapActions, mapState } from 'vuex'

import {mapState, mapActions} from 'pinia';
import {serviceStore} from '@slc/store/service';

export default {
    name: 'step-cs', // 测试
    computed: {
        ...mapState(serviceStore, [
            'serviceVerId',
            'outputData',
            'keyTypeList',
            'csInfo',
            "reqHeaderList",
            'inputData'
        ]),
        qqtTableData: {
            get() {
                return this.reqHeaderList;
            }
            // set(val) {
            //     this.setReqHeaderList(val);
            // },
        },
        inputTableData: {
            get() {
                return this.inputData;
            }
            // set(val) {
            //     console.log('设置新值:', val); // 输出设置的新值
            //     this.setInputData(val);
            //     console.log('更新后的inputData:', this.inputData); // 输出更新后的值
            // },
        }
    },
    watch: {
        qqtTableData: {
            deep: true,
            handler(val) {
                console.log('设置新值:', val); // 输出设置的新值
                this.setReqHeaderList(val);
                console.log('更新后的inputData:', this.reqHeaderList); // 输出更新后的            },
            },
        },
        inputTableData: {
            deep: true,
            handler(val) {
                console.log('设置新值:', val); // 输出设置的新值
                this.setInputData(val);
                console.log('更新后的inputData:', this.inputData); // 输出更新后的            },
            },
        },
    },
    methods: {
        ...mapActions(serviceStore, ['setReqHeaderList','setInputData']),
        formatJson(row) {
            try {
                // 尝试解析并格式化 JSON
                const parsedJson = JSON.parse(row.nodeData);
                console.log("nodeData",row.nodeData);
                row.nodeData = JSON.stringify(parsedJson, null, 2); // 2表示缩进空格数
            } catch (error) {
                this.$message.error('无效的 JSON 格式'); // 提示无效格式
            }
        }
    }
}


</script>

<style lang="scss" scoped>

</style>
